<template>
    <el-dialog
        title="修改菜单&权限"
        v-model="dialogVisible"
        @close="dialogFormVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        draggable
    >
        <el-form size="small" :model="formData" :rules="formRules" ref="form">
            <!--类型-->
            <el-form-item
                label="类型"
                prop="is_route"
                :label-width="formLabelWidth"
            >
                <el-radio-group v-model="formData.is_route">
                    <el-radio :label="1">页面</el-radio>
                    <el-radio :label="0">按钮</el-radio>
                </el-radio-group>
            </el-form-item>
            <!--菜单名称-->
            <el-form-item
                :label="formData.is_route == 1 ? '菜单名称' : '按钮名称'"
                prop="name"
                :label-width="formLabelWidth"
            >
                <el-input
                    v-model="formData.name"
                    autocomplete="off"
                    placeholder="请输入菜单名称"
                ></el-input>
            </el-form-item>

            <!--上级菜单-->
            <el-form-item
                label="上级菜单"
                prop="parent_id"
                :label-width="formLabelWidth"
            >
                <el-cascader
                    size="small"
                    v-model="parentsVal"
                    :options="accessList"
                    :props="propsParam"
                    @change="handleChange"
                ></el-cascader>
            </el-form-item>
            <el-form-item
                label="路由名称"
                prop="alias"
                :label-width="formLabelWidth"
                v-show="formData.is_route == 1"
            >
                <el-input
                    v-model="formData.alias"
                    autocomplete="off"
                    placeholder="请输入路由名称"
                ></el-input>
                <p></p>
            </el-form-item>
            <!--路径-->
            <el-form-item
                :label="formData.is_route == 0 ? '权限标识' : '路径'"
                prop="path"
                :label-width="formLabelWidth"
            >
                <el-input
                    v-model="formData.path"
                    autocomplete="off"
                    :placeholder="
                        formData.is_route == 0
                            ? '权限标识,请保证唯一性'
                            : '请输入组件文件路径'
                    "
                    :disabled="formData.path == '/plus'"
                >
                    <template #suffix>
                        <div v-if="formData.is_route == 1">.vue</div>
                    </template>
                </el-input>
                <p v-if="formData.is_route != 0">
                    提示：对应前端给的文件路径，例如：/index/index
                </p>
                <p v-else>
                    提示：对应前端按钮的权限标识，例如：/index/index/add
                </p>
            </el-form-item>
            <el-form-item
                label="重定向"
                prop="redirect_name"
                :label-width="formLabelWidth"
                v-show="formData.is_route == 1"
            >
                <el-input
                    v-model="formData.redirect_name"
                    autocomplete="off"
                    placeholder="请输入重定向地址"
                ></el-input>
            </el-form-item>
            <!--图标-->
            <el-form-item label="图标" :label-width="formLabelWidth">
                <iconSelect v-model="formData.icon" />
                <p>提示：请选择系统提供的图标</p>
            </el-form-item>
            <!--是否是菜单-->
            <!-- <el-form-item
        label="是否是菜单"
        :label-width="formLabelWidth"
        v-if="formData.is_route == 1"
      >
        <el-radio-group v-model="formData.is_menu">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item> -->
            <!--是否显示-->
            <el-form-item
                label="是否显示"
                :label-width="formLabelWidth"
                v-if="formData.is_route == 1"
            >
                <el-radio-group v-model="formData.is_show">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <!--按钮权限标识-->
            <!-- <el-form-item
        label="权限标识"
        :label-width="formLabelWidth"
        v-if="formData.is_route == 0"
      >
        <el-input
          v-model="formData.perm"
          autocomplete="off"
          placeholder="请输入按钮权限标识，例：添加 add 编辑 edit 删除 del"
        ></el-input>
      </el-form-item> -->
            <!--排序-->
            <el-form-item label="排序" prop="sort" :label-width="formLabelWidth"
                ><el-input
                    v-model="formData.sort"
                    placeholder="请输入排序"
                    type="number"
                ></el-input
            ></el-form-item>
        </el-form>
        <!--操作按钮-->
        <template #footer>
            <el-button @click="dialogFormVisible">取 消</el-button>
            <el-button type="primary" @click="onSubmit()" :disabled="loading"
                >确 定</el-button
            >
        </template>
    </el-dialog>
</template>

<script>
import { editAccess } from "@/api/access.js";
import { deepClone } from "@/utils/base.js";
export default {
    data() {
        return {
            /*是否加载中*/
            loading: false,
            /*form表单数据对象*/
            formData: {
                /*菜单名称*/
                name: "",
                alias: "",
                /*路由地址*/
                path: "",
                /*组件名*/
                views: "",
                /*别名*/
                alias: "",
                /*图标*/
                icon: "",
                /*是否是菜单*/
                is_menu: 1,
                /*是否是路由*/
                is_route: 1,
                /*是否显示*/
                is_show: 0,
                /*排序*/
                sort: 1,
                /*父集ID*/
                parent_id: 0,
            },
            /*验证规则*/
            formRules: {
                name: [
                    {
                        required: true,
                        message: "请输入菜单名称",
                        trigger: "blur",
                    },
                ],
                path: [
                    {
                        validator: this.checkPath,
                        trigger: "blur",
                    },
                ],
            },
            /*当前父集ID*/
            parentsVal: [],
            /*菜单列表*/
            accessList: [],
            /*排序*/
            srot: "1",
            /*左边长度*/
            formLabelWidth: "120px",
            /*是否显示*/
            dialogVisible: false,
            /*展示数据*/
            propsParam: {
                label: "name",
                value: "access_id",
                checkStrictly: true,
            },
        };
    },
    props: {
        open_edit: Boolean,
        add_type: String,
        rawData: Array,
        selectModel: Object,
    },
    created() {
        this.dialogVisible = this.open_edit;
        this.accessList = deepClone(this.rawData);
        this.accessList.unshift({
            name: "顶级菜单",
            access_id: 0,
        });
        this.formData = deepClone(this.selectModel);
        this.findParentsID(this.accessList);
    },
    methods: {
        /*选择菜单*/
        handleChange(e) {},

        /*查找父集id*/
        findParentsID(list) {
            let flag = false;
            for (let i = 0; i < list.length; i++) {
                let item = list[i];
                if (item.access_id == this.formData.parent_id) {
                    this.parentsVal.unshift(item.access_id);
                    flag = true;
                    break;
                } else {
                    let children = item.children;
                    if (typeof children != "undefined" && children.length > 0) {
                        if (this.findParentsID(children)) {
                            this.parentsVal.unshift(item.access_id);
                            flag = true;
                            break;
                        }
                    }
                }
            }
            return flag;
        },
        checkPath(rule, value, callback) {
            if (this.formData.is_route && !value) {
                callback(new Error("请输入路由地址"));
            } else {
                callback();
            }
        },
        /*修改菜单*/
        onSubmit() {
            let self = this;
            let params = self.formData;
            if (self.parentsVal.length > 0) {
                params.parent_id = self.parentsVal[self.parentsVal.length - 1];
            }
            self.$refs.form.validate((valid) => {
                if (valid) {
                    self.loading = true;
                    editAccess(params)
                        .then((res) => {
                            if (res.code == 1) {
                                ElMessage({
                                    message: res.msg,
                                    type: "success",
                                });
                                self.$emit("closeDialog", {
                                    type: "success",
                                    openDialog: false,
                                    data: params,
                                });
                                self.loading = false;
                            }
                        })
                        .catch((error) => {
                            self.loading = false;
                        });
                }
            });
        },

        /*关闭弹窗*/
        dialogFormVisible(e) {
            this.$emit("closeDialog", {
                type: "error",
                openDialog: false,
            });
        },
    },
};
</script>

<style></style>
